<!-- 歌手组件 -->
<template>
  <div class="singer_item">
    <div class="top_img cursor_class" @click="handleClickToArtistDetail(id)" style="border-radius: 4px;overflow: hidden;">
      <!-- <img :src="item.picUrl" alt=""> -->
      <el-image :src="picUrl" style="width: 100%; height: 100%" fit="cover" lazy />
    </div>
    <div class="bottom_info text_ellipsis">
      <span class="cursor_class text_ellipsis text_decoration" @click="handleClickToArtistDetail(id)">
        {{name}}</span>
      <el-tooltip class="box-item" effect="dark" :content="name + '的个人主页'" placement="top-start">
        <el-icon class="cursor_class" style="font-size:18px;color:#e2252b;" v-if="userid" @click="()=>{router.push({name:'user-home',params:{id:userid}})}">
          <UserFilled />
        </el-icon>
      </el-tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
import router from '@/router';
import { defineEmits, defineProps, toRefs } from 'vue'
import { Headset, Plus, Timer, VideoPlay, Comment, FolderAdd, Pointer, PriceTag, House, Sunny, Guide, MostlyCloudy, UserFilled } from '@element-plus/icons-vue'
const emit = defineEmits(['handleClickToArtistDetail'])
const handleClickToArtistDetail = (id: number) => {
  // emit('handleClickToArtistDetail', id)
  router.push({
    name: 'artist-detail',
    params: {
      id
    }
  })
}
const props = defineProps({
  picUrl: {
    type: String,
    default: ''
  },
  // 歌手id
  id: {
    type: Number,
    default: 0,
    require: true
  },
  // 歌手名字
  name: {
    type: String,
    default: ''
  },
  userid:{
    type: Number,
    default: 0,
    require: true
  }
})
const { picUrl, id, name } = toRefs(props)
</script>
<style lang="scss" scoped>
.singer_item {
  .top_img {
    width: 100%;
    height: 150px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .bottom_info {
    font-size: 12px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>